<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./echarts.js"></script>
    <style>
        @font-face{
            font-family: myFirstFont;
            src: url("VeraSeBd.ttf")
        }

        span{
            font-family: myFirstFont;
        }
    </style>
</head>
<body>
        <div style="background-image:url('https://zhuanyoyo.oss-us-west-1.aliyuncs.com/shopImg/KWkDTES7sB.jpg?x-oss-process=image/resize,m_lfit,w_275,h_204');height:300px;width:100%;background-attachment: fixed;">

        </div>
        
        <div style="height:1600px;width:100%;">
        sss
        </div>

    <span>test测试</span>
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="width: 600px;height:400px;"></div>
</body>
     <script type="text/javascript">
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
 
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
     </script>   
</html>